<template>
    <div class="container">
        <div class="search-content">
        <el-form :model="searchContent" ref="searchFrom" :inline="true">
            <el-form-item prop="consult_name" label="顾问：">
                <el-input v-model="searchContent.consult_name" placeholder="顾问名称" maxlength="32"></el-input>
            </el-form-item>
            <el-form-item prop="store_name" label="顾问公司：">
                <el-input v-model="searchContent.store_name" placeholder="顾问公司" maxlength="32"></el-input>
            </el-form-item>
            <el-form-item prop="mobile" label="客户手机：">
                <el-input v-model="searchContent.mobile" placeholder="客户手机" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="发起日期：">
                <el-date-picker
                    v-model="selectTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期" 
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    @change="handleChangeTime"
                    >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="consult_type" label="视频咨询：">
                <el-select v-model="searchContent.consult_type" placeholder="请选择状态">
                    <el-option
                        v-for="item in consultType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="group_name" label="远程诊断：">
                <el-input v-model="searchContent.group_name" placeholder="远程诊断" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="consult_type" label="是否接通：">
                <el-select v-model="searchContent.is_connect" placeholder="请选择">
                    <el-option
                        v-for="item in [{value: 1, label: '是'}, {value: 0, label: '否'}]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :header-cell-class-name="hdCellClassName" 
                :default-sort="{prop: 'id'}"
            >
                <el-table-column 
                  type="index" 
                  label="排序"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  label="顾问姓名"
                  min-width="130"
                  align="center"
                  prop="consult_name"
                >
                </el-table-column>
                <el-table-column 
                  label="顾问公司"
                  min-width="180"
                  align="center"
                  prop="store_name"
                >
                </el-table-column>
                <el-table-column 
                  label="顾问手机号"
                  min-width="120"
                  align="center"
                  prop="consult_mobile"
                >
                </el-table-column>
                <el-table-column 
                  prop="create_time" 
                  label="客户发起时间"
                  min-width="150"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="start_time" 
                  label="接待时间"
                  min-width="150"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="consult_time" 
                  label="接待时长"
                  min-width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="mobile" 
                  label="客户手机号"
                  min-width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="consult_type" 
                  label="视频咨询"
                  min-width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="group_name" 
                  label="远程诊断"
                  min-width="180"
                  align="center"
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group">
				<el-button type="primary" @click="getData('export')">导出</el-button>
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import { objScreen } from "@/common/js/util.js";
import {videoRecord} from './urlApi';
import Qs from 'qs';
export default {
    data() {
        return {
            searchContent: {
                consult_name: '',     // 顾问名称
				store_name: '',       // 顾问公司
				mobile: '',           // 客户手机
                start_time: '',       // 开始时间
                end_time: '',         // 结束时间 
                consult_type: '',     // 视频咨询类型
                group_name: '',       // 远程诊断 
                is_connect: '',       // 是否接通 
                is_search: false      // 是否处于搜索
            },
			selectTime: '',           // 接待时间 [start, end]
            consultType: [            // 视频咨询类型
				{label: '购车咨询', value: 1},
				{label: '售后咨询', value: 2},
				{label: '定损咨询', value: 3}
            ],
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 10,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
        }
    },
    methods: {
        handleChangeTime(val) {
            if(val) {
                this.searchContent.start_time = val[0];
                this.searchContent.end_time = val[1];
            } else {
                this.searchContent.start_time = null;
                this.searchContent.end_time = null;
            }
        },
        hdCellClassName() {
            return 'hdCellStyle'
        },
        async getData(action = null) {
            let datas = {
                pageSize: this.pageArr.pageSize,
                page: this.pageArr.curpage
            }
            if(this.searchContent.is_search) {
                datas = {...datas, ...this.searchContent};
            }
            datas = objScreen(datas);
            if(action == "export") {
                datas.is_export = 1;
                let domain = document.domain;
				if (domain != 'admin.mycjj.com' && domain != 'admin.chejj.cn') {
					domain = 'admin.chejj.cn'
				}
				const url = location.protocol + '//' + domain.replace('admin', 'api') + '/admin/yt_car/index.php?act=consultManagement&op=videoConsultList&' + Qs.stringify(datas);
                window.open(url)
                // window.location.href = url
            } else {
                const res = await videoRecord.get(datas)
                // console.log(res)
                if(res.code == 1) {
                    this.dataList = this.fieldFilter(res.data.list, [
                        "record_id", "consult_name", "store_name", "consult_mobile", "create_time", "start_time",
                        "consult_time", "mobile", "consult_type", "group_name"
                    ]);
                    this.pageArr.total = parseInt(res.data.totalCount)
                }
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        fieldFilter(data, field) {
            if(!data) return [];
            return data.map((item, key) => {
                let obj = {};
                field.map(item2 => {
                    if(item[item2]) {
                        obj[item2] = item[item2]
                    }
                })
                return obj;
            })
        },
        handleSearch() {
            if(!this.searchContent.is_search) this.searchContent.is_search = true;
            this.pageArr.curpage = 1;
            this.getData();
        },
        handleReset() {
            this.selectTime = null;
            this.$refs.searchFrom.resetFields();
            if(!this.searchContent.is_search) return;
            this.searchContent = {
                is_search: false
            }
            this.pageArr.curpage = 1;
            this.getData();
        },
    },
    created() {
        this.$parent.showButton = false;
        if(this.$route.query.begin) {
            /*
            this.searchContent.start_time = this.$route.query.begin
            this.searchContent.end_date = this.$route.query.end
            this.selectTime = [this.$route.query.begin, this.$route.query.end]
            this.searchContent.is_search = true;
            */
        }
        if(this.$route.query.data_type && this.$route.query.data_type < 4) {
            //this.searchContent.consult_type = this.$route.query.data_type;
            //this.searchContent.is_search = true;
        } 
        this.getData()
    },
	mounted() {
		resize(this)
	}
}
</script>
<style lang="scss" scoped>
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
